import React, { ReactElement ,useState} from 'react'
import { Table, Badge, Menu, Dropdown, Space } from 'antd';
import { DownOutlined } from '@ant-design/icons';

interface Props {

}
interface IState {
    title:string
    dataIndex?:string
    key:string
    fixed?:string
}

export default function index({ }: Props): ReactElement {

    const expandedRowRender = () => {
            const columns = [
                { title: 'Date', dataIndex: 'date', key: 'date' },
                { title: 'Name', dataIndex: 'name', key: 'name' },
                {
                    title: 'Status',
                    key: 'state',   
                },
                { title: 'Upgrade Status', dataIndex: 'upgradeNum', key: 'upgradeNum' },
                {
                    title: 'Action',
                    dataIndex: 'operation',
                    key: 'operation',  
                },
            ];

            const data = [];
            return <Table columns={columns}  pagination={false} />;
        };
    const [columns , setColumns] = useState<Array<any>>(
        [
            { title: '名称', dataIndex: 'name', key: 'name' ,fixed: 'left',},
            { title: '图标', dataIndex: 'platform', key: 'platform' },
            { title: '类型', dataIndex: 'version', key: 'version' },
            { title: '地址', dataIndex: 'upgradeNum', key: 'upgradeNum' },
            { title: 'Vue组件', dataIndex: 'creator', key: 'creator' },
            { title: '权限', dataIndex: 'createdAt', key: 'createdAt' },
            { title: '排序', dataIndex: 'createdAt', key: 'createdAt' },
            { title: '创建时间', dataIndex: 'createdAt', key: 'createdAt' },
            { title: '修改时间', dataIndex: 'createdAt', key: 'createdAt' },
            { title: '操作', key: 'operation',fixed: 'right'},
        ]
    )
    const data = [
        {
            name: 'Screem',
            platform: 'iOS',
            version: '10.3.4.5654',
            upgradeNum: 500,
            creator: 'Jack',
            createdAt: '2014-12-24 23:12:00',}
    ]

    return (
        <Table
            className="components-table-demo-nested"
            columns={columns}
            expandable={{ expandedRowRender }}
            dataSource={data}
            scroll={{ x: 1500 }}
            summary={pageData => (
              <Table.Summary >
                <Table.Summary.Row>
                  
                  <Table.Summary.Cell index={2} colSpan={8}>
                    
                  </Table.Summary.Cell>
                  {/* <Table.Summary.Cell index={10}></Table.Summary.Cell> */}
                </Table.Summary.Row>
              </Table.Summary>
            )}
        />
    )
}
// import { DownOutlined } from '@ant-design/icons';
// import React, { ReactElement,useState, useRef } from 'react'
// import ProForm, {
//     ProFormDigit,
//     ProFormRadio,
//     ProFormSelect,
//     ProFormSwitch,
//     ProFormText,
//     ProFormList,
//     ProFormGroup,
//     ProFormDependency,
//     ProFormTextArea,
//   } from '@ant-design/pro-form';
//   import type { ProColumnType } from '@ant-design/pro-table';
//   import ProTable from '@ant-design/pro-table';
//   import { useDebounceFn } from '@ant-design/pro-utils';
//   import ProCard from '@ant-design/pro-card';
//   import { Button } from 'antd';
//   import type { ProFormInstance } from '@ant-design/pro-form';

// interface Props {
    
// }

// export default function Menu({}: Props): ReactElement {
//     return (
//         <div>
            
//         </div>
//     )
// }


